<template>
  <div class="page">
    <div class="top flex-s-c">
      <div class="flex-l-c">
        <span class="fw">BTC</span>
        <span class="fw">/</span>
        <span class="fw">USDT</span>

        <div class="box1">
          <span style="color: #eaa900; margin-right: 0.5rem">10x</span>
          <van-icon class="icon" style="transform: rotate(90deg)" name="play" />
        </div>

        <span class="num red">+1.9%</span>
      </div>

      <div class="right-icon flex-l-c">
        <img src="@/assets/new/p1.png" alt="" />
        <van-icon size="20" name="ellipsis" @click="filtrateShow = true" />
      </div>
    </div>
    <div class="tab-container">
      <div class="tab-wrapper">
        <div class="tab-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">
          买入
        </div>
        <div class="tab-item sale" :class="{ active: activeTab === 1 }" @click="activeTab = 1">
          卖出
        </div>
        <div class="slider" :class="{ sale: activeTab === 1 }"
          :style="{ transform: `translateX(${activeTab * 100}%)` }"></div>
      </div>

      <van-switch v-model="isBuy" size="16" active-color="#fff" inactive-color="#5d5d5d" />
    </div>

    <div class="main flex-s-c" style="align-items: flex-start">
      <div class="left">
        <div v-if="activeTab === 1" class="flex-s-c">
          <div class="select-box flex-s-c" style="width: unset; flex: 1; margin-right: 1rem" @click="assetShow = true">
            <div class="flex-l-c">
              <span>{{ assetActive.text }}</span>
            </div>
            <van-icon name="play" style="transform: rotate(90deg)" />
          </div>

          <div class="select-box flex-s-c" style="width: 30%" @click="leverageShow = true">
            <div class="flex-l-c">
              <span>{{ rate }}X</span>
            </div>
            <van-icon name="play" style="transform: rotate(90deg)" />
          </div>
        </div>

        <div class="select-box flex-s-c" @click="entrustShow = true">
          <div class="flex-l-c">
            <span>{{ entrustActive.text }}</span>
            <van-icon class="tips" name="info-o" />
          </div>
          <van-icon name="play" style="transform: rotate(90deg)" />
        </div>

        <div class="select-box flex-col">
          <span class="t1">价格(USDT)</span>
          <span class="t2">45666</span>
        </div>

        <div class="select-box flex-s-c" v-if="isBuy">
          <span class="t3">数量</span>
          <input class="inp-r" type="text" v-model="number1" />
        </div>
        <div class="select-box flex-s-c" v-else>
          <div class="flex-col">
            <span class="t3">数量(BTC)</span>
            <span class="t3" style="color: #fff">2</span>
          </div>
          <span class="t3">BTC</span>
        </div>

        <div class="slider-container">
          <vue-slider v-model="sliderValue" :marks="{
            0: '',
            25: sliderValue == 25 ? '25%' : '',
            50: sliderValue == 50 ? '50%' : '',
            75: sliderValue == 75 ? '75%' : '',
            100: sliderValue == 100 ? '100%' : '',
          }" :included="true" :step="25" :min="0" :max="100"
            :process-style="{ backgroundColor: '#fff', height: '4px' }"
            :rail-style="{ backgroundColor: '#191919', height: '4px' }" @change="exchangeVal">
            <template v-slot:step="{ active }">
              <div :class="['custom-step', { active }]"></div>
            </template>
          </vue-slider>
        </div>

        <div class="flex-s-c slider-text" style="margin-top: 16px">
          <span>借币数量</span>
          <span>{{ sliderValue }}%</span>
        </div>

        <div class="select-box flex-s-c" v-if="isBuy">
          <span class="t3">金额</span>
          <input class="inp-r" type="text" v-model="number2" />
        </div>
        <div class="select-box flex-s-c" v-else>
          <div class="flex-col">
            <span class="t3">金额(USDT)</span>
            <span class="t3" style="color: #fff">122,422.1</span>
          </div>
          <span class="t3">USDT</span>
        </div>

        <div class="flex-s-c row-box">
          <span style="color: #929292">可用</span>
          <div class="flex-l-c">
            <span>0 USDT</span>
            <van-icon style="margin-left: 0.8rem" name="add-o" @click="rechargeShow = true" />
          </div>
        </div>

        <div class="flex-s-c row-box">
          <span style="color: #929292">可卖</span>
          <div class="flex-l-c">
            <span>0 BTC</span>
            <!-- <van-icon style="margin-left: 0.8rem;" name="add-o" /> -->
          </div>
        </div>

        <div class="flex-col my-check" v-if="activeTab === 1">
          <van-checkbox style="color: #fff" shape="square" v-model="check1">只减仓</van-checkbox>

          <div class="flex-s-c" v-if="isBuy">
            <van-checkbox style="color: #fff" shape="square" v-model="check2">{{ entrustActive2.text }}</van-checkbox>
            <van-icon name="arrow" @click="entrustShow2 = true"></van-icon>
          </div>
        </div>

        <div class="submit flex-c-c fw" :class="{ sale: activeTab === 1 }"
          @click="orderConfirmShow = true; orderConfirmType = activeTab === 0 ? 1 : 2;">
          {{ activeTab === 0 ? "买入" : "卖出" }}BTC
        </div>
      </div>
      <div class="right">
        <div class="row-title flex-s-c">
          <div class="flex-col">
            <span>价格</span>
            <span>(USDT)</span>
          </div>
          <div class="flex-col">
            <span>数量</span>
            <span>(BTC)</span>
          </div>
        </div>
        <template v-if="isBuy">
          <div class="row" v-for="item in 5">
            <span class="green">123,999.00</span>
            <span>0.055555</span>
          </div>

          <div class="flex-col rate-box">
            <span class="green fw">99,999.00</span>
            <span class="fw">≈ ￥555,123.3</span>
          </div>

          <div class="row" v-for="item in 5">
            <span class="red">123,999.00</span>
            <span>0.055555</span>
          </div>

          <div class="flex-s-c">
            <div class="select-box right flex-s-c" style="width: unset" @click="rateShow = true">
              <span class="t1">{{ rateActive }}</span>
              <van-icon name="play" style="transform: rotate(90deg)" />
            </div>

            <img style="width: 4.4rem;" src="@/assets/new/p2.png" alt="" @click="modelShow = true" />
          </div>
        </template>
        <template v-else>
          <div class="row" v-for="item in 15">
            <span :class="[activeTab === 1 ? 'green' : 'red']">123,999.00</span>
            <span>0.055555</span>
          </div>

          <div class="flex-s-c">
            <div class="select-box right flex-s-c" style="width: unset">
              <span class="t1">0.1</span>
              <van-icon name="play" style="transform: rotate(90deg)" />
            </div>

            <img style="width: 4.4rem;" src="@/assets/new/p2.png" alt="" />
          </div>
        </template>
      </div>
    </div>

    <div class="tabs flex-s-c">
      <div class="flex-l-c">
        <div :class="['tab', { active: activeTab2 === 0 }]" @click="activeTab2 = 0" class="tab-item">
          委托(0)
        </div>

        <div :class="['tab', { active: activeTab2 === 1 }]" @click="activeTab2 = 1" class="tab-item">
          仓位(0)和资产
        </div>

        <div :class="['tab', { active: activeTab2 === 2 }]" @click="activeTab2 = 2; leverageShow2 = true"
          class="tab-item">
          策略(0)
        </div>
      </div>

      <img src="@/assets/new/p4.png" alt="" @click="$router.push('/loanRule')" />
    </div>

    <div class="list-container">
      <div class="list-header flex-s-c">
        <div class="flex-l-c">
          <van-checkbox shape="square" v-model="selectAll" @change="handleSelectAll">当前交易品种</van-checkbox>
        </div>
        <div class="cancel-btn" @click="handleBatchCancel">批量撤单</div>
      </div>

      <div class="list-content">
        <!-- <div
          class="list-item flex-s-c"
          v-for="(item, index) in listData"
          :key="index"
        >
          <div class="flex-l-c">
            <van-checkbox
              style="color: #fff"
              shape="square"
              v-model="item.selected"
            ></van-checkbox>
            <div class="item-info">
              <div class="title">BTC/USDT 永续</div>
              <div class="sub-title">啊收拾收拾</div>
            </div>
          </div>
          <div class="item-right">
            <div class="price">41234.43</div>
            <div class="amount">0.234 BTC</div>
          </div>
        </div> -->

        <div v-if="listData.length >= 0" class="empty-box flex-col-c">
          <img src="@/assets/new/p3.png" alt="" />
          <div class="flex-col" style="align-items: center">
            <span style="margin-bottom: 0.9rem">暂无可用资金</span>
            <span style="color: #bdbdbd; margin-bottom: 0.9rem">立即充币，开启您的数字资产货币之旅</span>
            <span>前往充币 ></span>
          </div>
        </div>
      </div>
    </div>

    <!-- 选择杠杆倍数 -->
    <Rate :show.sync="rateShow" :options="rateOptions" @select="handleRateSelect" />
    <!-- 确认订单 -->
    <!-- 1=买入 2=卖出 -->
    <OrderConfirm :show.sync="orderConfirmShow" :type="orderConfirmType" />
    <!-- 委托弹出 -->
    <Entrust :show.sync="entrustShow" :options="entrustOptions" @select="handleEntrustSelect" />
    <!-- 委托弹出2 -->
    <Entrust2 :show.sync="entrustShow2" :options="entrustOptions2" @select="handleEntrustSelect2" />
    <!-- 仓位资产弹出 -->
    <Asset :show.sync="assetShow" :options="assetOptions" @select="handleAssetSelect" />
    <!-- 充币 -->
    <Recharge :show.sync="rechargeShow" :options="rechargeOptions" />
    <!-- 杠杆 -->
    <Leverage :show.sync="leverageShow" :value.sync="rate" />
    <!-- 杠杆2 -->
    <Leverage2 :show.sync="leverageShow2" :value.sync="rate2" />
    <!-- 模式 -->
    <Model :show.sync="modelShow" />
    <!-- 筛选 -->
    <Filtrate :show.sync="filtrateShow" />
  </div>
</template>
<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import Rate from './components/popus/Rate.vue'
import OrderConfirm from './components/popus/OrderConfirm.vue'
import Entrust from './components/popus/Entrust.vue'
import Entrust2 from './components/popus/Entrust2.vue'
import Asset from './components/popus/Asset.vue'
import Recharge from './components/popus/Recharge.vue'
import Leverage from './components/popus/Leverage.vue'
import Model from './components/popus/Model.vue'
import Filtrate from './components/popus/Filtrate.vue'
import Leverage2 from './components/popus/Leverage2.vue'
import { Dialog } from 'vant';

export default {
  components: {
    VueSlider,
    Rate,
    OrderConfirm,
    Entrust,
    Entrust2,
    Asset,
    Recharge,
    Leverage,
    Model,
    Filtrate,
    Leverage2
  },
  data() {
    return {
      activeTab: 0,
      isBuy: true,
      sliderValue: 0,
      activeTab2: 0,
      selectAll: false,
      check1: false,
      check2: false,
      number1: "12333",
      number2: "45422",
      listData: [
        {
          selected: false,
          symbol: "BTC/USDT",
          type: "永续",
          orderType: "市价委托",
          price: "41234.43",
          amount: "0.234",
        },
        {
          selected: false,
          symbol: "BTC/USDT",
          type: "永续",
          orderType: "市价委托",
          price: "41234.43",
          amount: "0.234",
        },
      ],
      rateShow: false,
      rateActive: "1",
      rateOptions: [
        { text: "0.1", value: 0.1 },
        { text: "1", value: 1 },
        { text: "10", value: 10 },
        { text: "100", value: 100 },
      ],
      orderConfirmShow: false,
      orderConfirmType: 1,
      entrustShow: false,
      entrustActive: {
        text: "市价委托",
        detail: "以可成交的最优价格快速买入或卖出",
        icon: require('@/assets/image/Group 7758.png'),
        value: 2
      },
      entrustOptions: [
        {
          text: "限价委托",
          detail: "以指定或更优价格买入或卖出",
          icon: require('@/assets/image/Group 7757.png'),
          value: 1
        },
        {
          text: "市价委托",
          detail: "以可成交的最优价格快速买入或卖出",
          icon: require('@/assets/image/Group 7758.png'),
          value: 2
        },
        {
          text: "止盈/止损",
          detail: "达到预设的目标价格时下单",
          icon: require('@/assets/image/Group 7759.png'),
          value: 3
        },
      ],
      entrustShow2: false,
      entrustActive2: { text: "止盈止损", value: 3 },
      entrustOptions2: [
        { text: "全部委托", value: 1 },
        { text: "现价 | 市价", value: 2 },
        { text: "止盈止损", value: 3 },
      ],
      assetShow: false,
      assetActive: { text: "资产", value: 3 },
      assetOptions: [
        { text: "全部", value: 1 },
        { text: "仓位(0)", value: 2 },
        { text: "资产", value: 3 },
      ],
      rechargeShow: false,
      rechargeOptions: [
        {
          text: "充入数字货币",
          detail: "从链上钱包或交易所转入数字货币",
          icon: require('@/assets/image/recharge1.png'),
          value: 1
        },
        {
          text: "c2c交易",
          detail: "灵活支持100+收付款方式，0手续费",
          icon: require('@/assets/image/recharge2.png'),
          value: 2
        },
      ],
      leverageShow: false,
      rate: 1,
      leverageShow2: false,
      rate2: 1,
      modelShow: false,
      filtrateShow: false,
    };
  },
  methods: {
    exchangeVal() {
    },
    // 全选/取消全选
    handleSelectAll(value) {
      this.listData.forEach((item) => {
        item.selected = value;
      });
    },

    // 批量撤单
    handleBatchCancel() {
      const selectedItems = this.listData.filter((item) => item.selected);
      if (selectedItems.length === 0) {
        this.$toast("请先选择要撤销的订单");
        return;
      }
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认要撤销选中的订单吗?",
        })
        .then(() => {
          // TODO: 调用撤单接口
          this.$toast("撤单成功");
        })
        .catch(() => {
        });
    },
    // 选择杠杆倍数
    handleRateSelect(item) {
      this.rateActive = item.value;
    },
    // 选择委托类型
    handleEntrustSelect(item) {
      this.entrustActive = item;
    },
    // 选择止盈止损类型
    handleEntrustSelect2(item) {
      this.entrustActive2 = item;
    },
    // 选择仓位资产类型
    handleAssetSelect(item) {
      this.assetActive = item;
    },
  },
  watch: {
    // 监听列表项选中状态,控制全选状态
    listData: {
      handler(val) {
        this.selectAll = val.length > 0 && val.every((item) => item.selected);
      },
      deep: true,
    },
  },
  mounted() {
    // Dialog.alert({
    //   message: '只减仓订单仅允许减少仓位，确保你的仓位不会增加',
    //   className: 'dialog-box',
    //   confirmButtonText: '好的',
    //   getContainer: () => document.querySelector('.page')
    // }).then(() => {
    //   setTimeout(() => {
    //     Dialog.alert({
    //       message: '止盈止损是指下单时提前为该订单预设止盈价及止损价，以锁定利润或控制损失。当订单完全成交时，系统将自动进行止盈止损委托。',
    //       className: 'dialog-box dialog-box1',
    //       confirmButtonText: '好的',
    //       getContainer: () => document.querySelector('.page')
    //     }).then(() => {
    //       // on close
    //     });
    //   }, 500)
    // });
  }
};
</script>

<style scoped lang="scss">
div {
  box-sizing: border-box;
}

.page {
  width: 100vw;
  min-height: 100vh;
  background-color: #000;
  color: #fff;

  .top {
    width: 100%;
    padding: 40px;
    font-size: 34px;

    .red {
      color: #eb4b6d;
    }

    .green {
      color: #31bd65;
    }

    .box1 {
      margin: 0 20px;
      font-size: 20px;

      .icon {
        font-size: 24px;
      }
    }

    .num {
      font-size: 24px;
    }

    .right-icon {
      img {
        width: 40px;
        height: auto;
      }

      img:first-child {
        margin-right: 20px;
      }
    }
  }
}

input {
  background-color: transparent;
  border: none;
}

input.inp-r {
  text-align: right;
}

.flex-l-c {
  display: flex;
  align-items: center;
}

.flex-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-s-c {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col-c {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fw {
  font-weight: 600;
}

.tab-container {
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .tab-wrapper {
    position: relative;
    display: flex;
    width: 480px;
    height: 64px;
    background: #191919;
    border-radius: 64px;
    overflow: hidden;

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #929292;
      cursor: pointer;
      z-index: 1;

      &.active {
        color: #fff;
      }
    }

    .slider {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
      background: #eb4b6d;
      border-radius: 64px;
      transition: transform 0.3s;
    }
  }
}

.main {
  padding: 0 40px;
  margin-top: 20px;

  .select-box {
    width: 480px;
    padding: 20px 32px;
    background-color: #191919;
    border-radius: 10px;
    font-size: 26px;
    margin-bottom: 20px;

    .tips {
      margin-left: 8px;
      color: #909090;
    }

    .t1 {
      color: #bdbdbd;
      font-size: 20px;
      margin-bottom: 8px;
    }

    .t2 {
      font-size: 26px;
    }

    .t3 {
      font-size: 26px;
      color: #bdbdbd;
    }
  }

  .left {
    width: 480px;

    .slider-box {
      margin: 28px 0;
      padding: 0 20px;
      font-size: 24px;
      color: #929292;

      .custom-button {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #000000;
        border: 1px solid #fff;
      }
    }

    .slider-text {
      margin: 28px 0;
      font-size: 24px;
      color: #929292;
    }

    .row-box {
      font-size: 24px;
      padding: 20px 0;
    }

    .submit {
      width: 480px;
      height: 72px;
      border-radius: 72px;
      background-color: #eb4b6d;
      color: #fff;
      font-size: 28px;
      margin-top: 40px;
    }

    .submit.sale {
      background-color: #31bd65;
    }
  }

  .right {
    flex: 1;
    margin-left: 20px;

    .right.select-box {
      width: unset;
      flex: 1;
      margin-right: 10px;
      margin-left: 0;
      margin-bottom: 0;
    }

    .row-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #929292;
    }

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
      line-height: 40px;
      margin-bottom: 12px;

      .red {
        font-size: 20px;
        color: #eb4b6d;
      }

      .green {
        font-size: 20px;
        color: #31bd65;
      }
    }

    .rate-box {
      margin-bottom: 12px;

      span:first-child {
        font-size: 36px;
      }

      span:last-child {
        font-size: 22px;
        color: #929292;
      }
    }
  }
}

.sale.slider {
  background-color: #31bd65 !important;
}

.tabs {
  padding: 0 32px;
  margin-top: 20px;
}

.tab-item {
  padding: 20px;
  font-size: 24px;
  color: #929292;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  color: #fff;
  font-weight: bold;
}

.list-container {
  padding: 0 32px;
  margin-top: 20px;

  .list-header {
    padding: 20px 0;
    border-bottom: 1px solid #2c2c2c;

    .cancel-btn {
      font-size: 24px;
      color: #6a6a6a;
      cursor: pointer;
    }
  }

  .list-content {
    .list-item {
      padding: 20px 0;
      border-bottom: 1px solid #2c2c2c;

      .item-info {
        margin-left: 20px;

        .title {
          font-size: 24px;
          margin-bottom: 8px;
        }

        .sub-title {
          font-size: 20px;
          color: #929292;
        }
      }

      .item-right {
        text-align: right;

        .price {
          font-size: 24px;
          margin-bottom: 8px;
        }

        .amount {
          font-size: 20px;
          color: #929292;
        }
      }
    }
  }
}

/deep/ .van-checkbox__label {
  color: #fff;
}

/deep/ .van-checkbox__icon,
/deep/ .van-checkbox__icon .van-icon {
  width: 32px;
  height: 32px;
}

span.green {
  color: #31bd65;
}

span.red {
  color: #eb4b6d;
}

.empty-box {
  margin-top: 20px;
  font-size: 20px;

  span:first-child {
    font-size: 28px;
  }

  img {
    width: 180px;
  }
}

/deep/ .my-check {
  font-size: 24px;

  .van-checkbox__icon,
  .van-checkbox__icon .van-icon {
    width: 28px;
    height: 28px;
  }

  /deep/ .van-checkbox__icon .van-icon {
    font-size: 20px;
  }
}

/deep/ .van-checkbox__icon .van-icon {
  font-size: 24px;
}

.slider-container {
  padding: 20px 10px;
  margin: 15px 0;
  // margin-bottom: 45px;

  :deep(.vue-slider) {
    height: 4px;

    .vue-slider-mark {
      width: 100%;
      height: 100%;

      .vue-slider-mark-step {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #212121;
        transform: translateY(-8px);
      }

      .vue-slider-mark-label {
        font-size: 24px;
        color: #868d9a;
        margin-top: 16px;
      }
    }

    .vue-slider-dot-handle {
      width: 20px;
      height: 20px;
      border: solid 2px #fff;
      background-color: #000000;
      border-radius: 50%;
      transform: translateY(-8px);
    }

    .custom-step.active {
      box-shadow: 0 0 0 2px #fff;
      background-color: #000000;
    }
  }
}

/deep/ .van-switch__node {
  background-color: #272727;
  top: -0.1rem;
}

/deep/ .vue-slider-dot-handle {
  background-color: #000000 !important;
  // transform: translate(-2px, -0.3125rem);
  width: 2.1875rem !important;
  height: 2.1875rem !important;
  border: 2px solid #fff;
}

.custom-step {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  // border: solid 1px #fff;
  background: #212121;
  transform: translateY(-6px);
}

.custom-step.active {
  box-shadow: 0 0 0 2px #fff;
  background-color: #000000;
  transform: translate(-5px, -6px);
}

/deep/ .list-header .van-checkbox__label {
  font-size: 22px;
}

/deep/ .dialog-box {
  background-color: #383838;
  border-radius: 14px;

  .van-dialog__message {
    color: #fff;
    text-align: left;
    padding: 30px;
    line-height: 50px;
  }

  .van-dialog__footer {
    background: #383838;

    &::after {
      border-color: #4a4a4a;
      border-width: 2px;
      border-left: none;
      border-right: none;
      border-bottom: none;
    }

    button {
      background: #383838;
      color: #fff;
    }
  }
}

/deep/ .dialog-box1 {
  .van-dialog__message {
    padding: 50px;
  }
}
</style>
